<template>
  <el-dialog :title="title" width="45%" :visible.sync="dialogTableVisible">
    <el-tabs tab-position="left" style="height: 350px">
      <el-tab-pane label="快捷方式">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="设备" v-if="typeof device_number === 'object'">
            <el-tag type="success">批量发送</el-tag>
            <el-tag style="margin-left: 5px" :key="index" v-for="(item, index) in device_number">{{item}}</el-tag>
          </el-form-item>
          <el-form-item label="设备" v-else>
            <el-tag type="success">{{detail.class_room}}</el-tag>
            <el-tag >{{detail.device_number}}</el-tag>
          </el-form-item>
          <el-form-item label="命令类型">
            <el-select v-model="form.region" placeholder="常规命令">
              <el-option label="常规命令" value="dos"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="命令指令">
            <el-radio-group v-model="form.command" @change="pickCommand" >
              <el-radio-button :label="item.command" :key="index" v-for="(item, index) in commandsInit">{{item.name}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="命令内容">
            <el-tag type="danger">{{currentCommand}}</el-tag>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sendCommand" v-loading="sending">立即发送</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="系统更新">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="设备" v-if="typeof device_number === 'object'">
            <el-tag type="success">批量发送</el-tag>
            <el-tag style="margin-left: 5px" :key="index" v-for="(item, index) in device_number">{{item}}</el-tag>
          </el-form-item>
          <el-form-item label="设备" v-else>
            <el-tag type="success">{{detail.class_room}}</el-tag>
            <el-tag >{{detail.device_number}}</el-tag>
          </el-form-item>
          <el-form-item label="命令指令">
            <el-radio-group v-model="formUpgrade.type">
              <el-radio-button label="1">更新讲台</el-radio-button>
              <el-radio-button label="2">更新服务</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="命令内容">
            <el-input type="textarea"  placeholder="默认情况下，不需要填写" v-model="formUpgrade.command"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sendUpgrade" v-loading="sending">立即发送</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="自定义命令">
        <el-form ref="formCustom" :model="formCustom" label-width="80px">
          <el-form-item label="设备" v-if="typeof device_number === 'object'">
            <el-tag type="success">批量发送</el-tag>
            <el-tag style="margin-left: 5px" :key="index" v-for="(item, index) in device_number">{{item}}</el-tag>
          </el-form-item>
          <el-form-item label="设备" v-else>
            <el-tag type="success">{{detail.class_room}}</el-tag>
            <el-tag >{{detail.device_number}}</el-tag>
          </el-form-item>
          <el-form-item label="命令名称">
            <el-input placeholder="请输入自定义命令名" v-model="formCustom.name"></el-input>
          </el-form-item>
          <el-form-item label="命令内容">
            <el-input  placeholder="请输入自定义命令" type="textarea" v-model="formCustom.command"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sendCommandByCustom" v-loading="sending">立即发送</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import Common from '@/api/Common'
const _http = new Common()
export default {
  data () {
    return {
      dialogTableVisible: false,
      sending: false,
      title: '',
      detail: [],
      device_number: [],
      currentCommand: 'void',
      form: {
        name: '',
        command: '',
        status: 2
      },
      formCustom: {
        name: '',
        command: '',
        status: 2
      },
      formUpgrade: {
        type: 1,
        command: ''
      },
      commandsInit: [],
      confirm: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$on('dialogCommand', (res, checkbox) => {
        console.log('wat', res, checkbox)
        if (checkbox.length === 0) {
          this.title = res.class_room
          this.device_number = res.device_number
        } else {
          this.title = '批量发送'
          this.device_number = checkbox
        }
        console.log('type', typeof this.device_number)
        this.detail = res
        this.sending = false
        this.dialogTableVisible = true
      })
    })
  },
  created () {
    this.getCommands()
  },
  methods: {
    _confirm () {
      this.$confirm('是否继续?', '发送命令', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.confirm = true
      }).catch(() => {
        this.confirm = false
      })
    },
    getCommands () {
      _http.get('/control/telnet/getCommands').then(res => {
        console.log('commands', res)
        if (res.status === 1) {
          this.commandsInit = res.data
        }
      })
    },
    sendCommand () {
      this.$confirm('是否继续?', '发送命令', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sending = true
        _http.post('/control/telnet/sendTelnet', Object.assign(this.form, {device_number: this.device_number}))
          .then(res => {
            console.log('send', res)
            if (res.status === 1) {
              this.$message.success('发送命令成功')
              this.sendEnd()
            } else {
              if (res.data !== null) {
                this.$message.error('部分设备已下线' + ': ' + JSON.stringify(res.data))
                this.sendEnd()
              } else {
                this.$message.error(res.msg)
              }
            }
            this.sending = false
          }).catch(error => {
            console.log(error)
            this.sending = false
          })
      }).catch(() => {
      })
    },
    sendCommandByCustom () {
      this.$confirm('是否继续?', '发送命令', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sending = true
        _http.post('/control/telnet/sendTelnet', Object.assign(this.formCustom, {device_number: this.device_number}))
          .then(res => {
            console.log('send', res)
            if (res.status === 1) {
              this.$message.success('发送命令成功')
              this.sendEnd()
            } else {
              if (res.data !== null) {
                this.$message.error('部分设备已下线' + ': ' + JSON.stringify(res.data))
                this.sendEnd()
              } else {
                this.$message.error(res.msg)
              }
            }
            this.sending = false
          }).catch(error => {
            console.log(error)
            this.sending = false
          })
      }).catch(() => {
      })
    },
    pickCommand (dos) {
      console.log('pick', dos)
      let list = this.commandsInit
      list.forEach((item, index) => {
        if (item['command'] === dos) {
          this.form.name = item['name']
          this.currentCommand = item['command']
          return false
        }
      })
    },
    sendUpgrade () {
      this.$confirm('是否继续?', '发送命令', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sending = true
        _http.post('/control/telnet/execDownMainEwork', Object.assign(this.formUpgrade, {device_number: this.device_number}))
          .then(res => {
            console.log('upgrade', res)
            if (res.status === 1) {
              this.$message.success('发送命令成功')
              this.sendEnd()
            } else {
              if (res.data.length > 0) {
                this.$message.error('部分设备已下线' + ': ' + JSON.stringify(res.data))
                this.sendEnd()
              } else {
                this.$message.error(res.msg)
              }
            }
            this.sending = false
          }).catch(error => {
            console.log('err', error)
            this.sending = false
          })
      }).catch(() => {
        this.confirm = false
      })
    },
    sendEnd () {
      this.dialogTableVisible = false
      this.form.name = ''
      this.form.command = ''
      this.formCustom.name = ''
      this.formCustom.command = ''
      this.formUpgrade.command = ''
    }
  }
}
</script>
